<template>
  <div>
    <van-cell title="私教" is-link to="/coachdetails" value="全部" />
    <div class="image-big-box">
      <div class="image-small-box" v-for="(item, i) in courselist" :key="i">
        <van-image width="120" height="120" fit="cover" :src="courselist[i].protrait"></van-image>
        <div class="text-box">
          <p>{{ courselist[i].cname }}</p>
          <p>{{ courselist[i].ct1 }}</p>
          <p>{{ courselist[i].ct2 }}</p>
          <p>{{ courselist[i].ct3 }}</p>
        </div>
      </div>
    </div>
    <van-cell title="学员案例" is-link to="/studentdetails" value="全部" />
    <div class="image-big-box">
      <div class="image-small-box" v-for="(item, i) in studentlist" :key="i">
        <div class="image-box">
          <van-image width="110" height="110" fit="cover" :src="studentlist[i].bimage"></van-image>
          <van-image width="110" height="110" fit="cover" :src="studentlist[i].aimage"></van-image>
        </div>
        <div class="text-box">
          <p>{{ studentlist[i].title }}</p>
          <p>{{ studentlist[i].ct }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Privatecoach',
  data() {
    return {
      courselist: [
        {
          protrait: require('../assets/coach/旺旺.jpg'),
          cname: '旺旺',
          ct1: '好评率94.33%',
          ct2: '增肌|减脂',
          ct3: '累计上课582节'
        },
        {
          protrait: require('../assets/coach/浪明.jpg'),
          cname: '浪明',
          ct1: '好评率91.67%',
          ct2: '增肌|减脂',
          ct3: '累计上课1851节'
        },
        {
          protrait: require('../assets/coach/皮卡.jpg'),
          cname: '皮卡',
          ct1: '好评率98.00%',
          ct2: '减脂|增肌|拉伸',
          ct3: '累计上课439节'
        },
        {
          protrait: require('../assets/coach/小邱.jpg'),
          cname: '小邱',
          ct1: '好评率91.00%',
          ct2: '减脂|增肌',
          ct3: '累计上课648节'
        }
      ],
      studentlist: [
        {
          bimage: require('../assets/student/四个月前.jpg'),
          aimage: require('../assets/student/四个月后.jpg'),
          title: '四个月减脂塑形成功',
          ct: '减脂3个月'
        },
        {
          bimage: require('../assets/student/美貌前.jpg'),
          aimage: require('../assets/student/美貌后.jpg'),
          title: '四个月减脂塑形成功',
          ct: '减脂3个月'
        }
      ]
    }
  },

  mounted() {},

  methods: {}
}
</script>

<style lang="less" scoped>
/deep/ .van-cell {
  margin: 12px 0px 6px;
}
/deep/ .van-cell__title {
  font-family: Georgia;
  font-size: 16px;
}
.image-big-box {
  width: 333.5px;
  display: flex;
  justify-content: start;
  overflow: hidden;
  margin-left: 10px;
  .image-small-box {
    margin-left: 4px;
    background-color: #f6f7f7;
    border-radius: 5px;
    /deep/ .van-image {
      position: relative;
      > img {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
      }
    }
    .image-box {
      display: flex;
      /deep/ .van-image:nth-child(1) {
        img {
          border-top-left-radius: 5px;
          border-top-right-radius: 0px;
        }
      }
      /deep/ .van-image:nth-child(2) {
        img {
          border-top-left-radius: 0px;
          border-top-right-radius: 5px;
        }
      }
    }
    .text-box {
      p {
        margin: 0px;
        margin-left: 8px;
      }
      p:nth-child(1) {
        padding: 4px 0px;
        font-size: 16px;
        color: #333333;
      }
      p:nth-child(2) {
        font-size: 14px;
        color: #666666;
      }
      p:nth-child(3) {
        font-size: 10px;
        color: #999999;
      }
      p:nth-child(4) {
        font-size: 10px;
        color: #999999;
        padding: 4px 0px 18px;
      }
    }
  }
}
</style>
